<template>
	<view style="align-items: center;">
		<search ref="searchRef" @click="func()" @search="searchfunc" :type="1"></search>
	</view>
	<picker class="pickerBox" :range="array" @change="pickerChange($event.detail.value)">
		<view class="picker">
			<text>{{str}}</text>
			<image src="../../static/xiangxia-2.png" class="icon" mode="aspectFit"></image>
		</view>
	</picker>
	<view scroll-y="true" class="itemsList">
		<view class="eventitemBox" v-for="item in eventList" 
		@click="item.selected = !item.selected" :key="item.id">
			<select-box v-show="selectShow" :selected="item.selected"></select-box>
			<slide-done-item
			:aimid="item.id" 
			@delete="reshow()"
			:selected="item.selected" 
			v-show="item.display"
			:class="{rightmove:rightMove, leftmove:!rightMove}">
				<event-item
				:data="item"  
				@click="goToDetail(item);"
				@longOn="longOn();"
				v-show="item.display"
				:type="1"></event-item>
			</slide-done-item> 
		</view>
	</view>
	<bottom-selection-bar v-show="rightMove" :class="{expend:rightMove}">
		<button @click="leftmove()" class="selectedBotton">取消</button>
		<button @click="deleteselected()" class="selectedBotton">删除</button>
		<button @click="completeselected()" class="selectedBotton">回调</button>
	</bottom-selection-bar>
</template>

<script setup>
import { ref } from 'vue';
import {onShow} from "@dcloudio/uni-app";
import db from '../../util/db';
import mydate from '../../util/mydate';
// 定义选择栏相关内容
const rightMove = ref(false);
const selectShow = ref(false);
function longOn()
{
	console.log('监测到长按，执行整体右侧移动');
	rightMove.value = true;
	selectShow.value = true;
}
// 所有内容的统一终止操作
function leftmove()
{
	console.log('向左移动');
	rightMove.value = false;
	setTimeout(()=>{
		selectShow.value = false;
	},500);
	for(let i in eventList.value)
	{
		eventList.value[i].selected = false;
	}
}
//删除选中项
async function deleteselected()
{
	console.log("删除选中项");
	let deleteaim = [];
	for(let i in eventList.value)
	{
		if(eventList.value[i].selected == true)
		{
			console.log("删除",eventList.value[i].name);
			await db.deleteDoneEvent(eventList.value[i].id);
			deleteaim.push(eventList.value[i].id);
		}
	}
	let temp = eventList.value.filter(item => !deleteaim.includes(item.id));
	eventList.value = temp;
	leftmove();
}
//完成选中项
async function completeselected()
{
	console.log("回调选中项");
	let deleteaim = [];
	for(let i in eventList.value)
	{
		if(eventList.value[i].selected == true)
		{
			console.log("回调",eventList.value[i].name);
			await db.reAddEvent(eventList.value[i].id);
			deleteaim.push(eventList.value[i].id);
		}
	}
	let temp = eventList.value.filter(item => !deleteaim.includes(item.id));
	eventList.value = temp;
	leftmove();
}
//搜索相关内容
//搜索按钮按下
function searchfunc(e){
	for(let i in eventList.value)
	{
		// console.log(eventList.value[i])
		eventList.value[i].display = 1;
	}
	if(e.value ==""){
		console.log("输入为空");
		return;
	}
	for(let i in eventList.value)
	{
		if(!(eventList.value[i].name.includes(e.value) || eventList.value[i].label.includes(e.value)))
		{
			console.log("更改display",i);
			eventList.value[i].display = 0;
		}
	}
}
// 数据初始化内容
const eventList = ref(null);
onShow(async()=>{
	await reshow();
})
function goToAddEvent()
{
	uni.navigateTo({
		url:"/pages/addevent/addevent",
	});
}
function goToDetail(item)
{
	if(rightMove.value == true){
		return;
	}
	console.log(item);
	const queryString = `id=${item.id}`;
	uni.navigateTo({
		url:"/pages/doneEventDetail/doneEventDetail?"+queryString,
	});
}
// 刷新页面
async function reshow()
{
	await db.openDatabase();
	eventList.value = await db.selectDoneEvent();
	console.log("输出数据",eventList.value);
	await db.closeDatabase();
	eventList.value.reverse();
	for(let i in eventList.value)
	{
		// 获取总日期差
		console.log("输出数据",eventList.value[i]);
		eventList.value[i].timeRate = mydate.durationRateComputed(eventList.value[i].begin,eventList.value[i].end);
		console.log("输出数据",eventList.value[i].timeRate);
		eventList.value[i].display = 1;
	}
}
// 定义picker框内容
const array = ref(["默认排序","按照完成事件排序"])
const str = ref("默认排序")
function pickerChange(e){
	str.value = array.value[e];
	console.log(e);
	console.log(eventList.value);
	if(e == 0)
	{
		console.log("执行排序")
		eventList.value.sort((a,b)=> b.timeRate - a.timeRate);
		console.log(eventList.value);
	}
	if(e == 1)
	{
		console.log("执行排序")
		eventList.value.sort((a,b)=> b.donedate - a.donedate);
		console.log(eventList.value);
	}
}
// 搜索内容获取
const searchRef = ref(null);
function func(){
	console.log(searchRef.value.inputValue);
}


</script>

<style lang="scss" scoped>
*{
	display: flex;
	flex-direction: column;
}
.expend{
	transform-origin: left;
	animation: expendAnimation 0.5s ease 1;
}
@keyframes expendAnimation{
	from{
		transform: scale(0,1);
	}
	to{
		transform: scale(1);
	}
}
.selectedBotton{
	flex:1;
	background-color: #f6f6f6;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rightmove{
	transform: translate(120rpx);
	transition: transform 0.5s ease;
}
.leftmove{
	transform: translate(0);
	transition: transform 0.5s ease;
}
.eventitemBox{
	width: 750rpx;
	position: relative; 
	display:flex;
	flex-direction: row;
}
.listbutton{
	position: absolute;
	right: 10%;
	top: 10%;
}
.pickerBox{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.picker{
	height: 60rpx;
	flex-direction: row;
	align-items: center;
	text{
		font-size: 30rpx;
		font-weight: 500;
	}
}
.itemsList{
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}
.icon{
	width: 60rpx;
	height: 60rpx;
}

</style>
